<template>
	<div class="chat-message-container">
		<div class="agent-box" v-if="name === agent.userName && user.id === agent.id">
			<Avatar :src="agent.isRobot || user.isRobot ? robotImages : agentImages" size="large" />
			<div class="agent-text">
				<p class="agent-name"> 坐席{{ name }} </p>
				<div @click="showFullImg" class="text" :class="'chatMessageText' + index" ref="chatMessage">
					<img class="img" v-if="message.type === 'pic'" :src="message.url" alt="" />
					<span class="link" v-if="message.type === 'file' || message.type === 'doc'" :href="message.url"> {{ message.fileName || message.name }} </span>
					<span class="link" v-if="msgType === 'view'"> {{ message.url }} </span>
					<span class="cmd" v-if="message.contents"> {{ message.contents }} </span>
				</div>
			</div>
			<span v-if="msgType === 'view' || message.contents" class="buiness"><i>指令消息</i></span>
		</div>
		<div class="customer-box" v-else-if="type !== 'system'">
			<Avatar v-if="type === 'customer'" :src="user.avatar ? user.avatar : clientImages" size="large" />
			<Avatar v-else :src="agent.isRobot || user.isRobot ? robotImages : agentImages" size="large" />
			<div class="customer-text">
				<p class="customer-name"> {{ `${type === 'customer' ? '' : '坐席'} ` + name }} </p>
				<div @click="showFullImg" class="text" :class="'chatMessageText' + index" ref="chatMessage">
					<img class="img" v-if="message.type === 'pic'" :src="message.url" alt="" />
					<span class="link" v-if="message.type === 'file' || message.type === 'doc'" :href="message.url"> {{ message.fileName || message.name }} </span>
					<span class="link" v-if="msgType === 'view'"> {{ message.url }} </span>
					<span class="cmd" v-if="message.contents"> {{ message.contents }} </span>
					<a class="cmd" v-if="message.type === 'richtext'" style="text-decoration:underline;"> 推送富文本 </a>
				</div>
			</div>
			<span v-if="msgType === 'view' || message.contents || message.status === 'done'" class="buinessCustomer"><i>指令消息</i></span>
		</div>
		<!-- 富文本 -->
		<RichText v-if="richText" :richText="richText" @close="closeRichText" />
	</div>
</template>

<script>
import _ from 'lodash';
import { mapMutations, mapState } from 'vuex';
import RichText from '../components/Toast/RichText.vue';
export default {
	name: 'chatMessage',
	data() {
		return {
			id: undefined,
			textarea: '',
			clientImages: require('../../static/images/customer_avatar.png'),
			robotImages: require('../../static/images/robot_avatar.png'),
			agentImages: require('../../static/images/agent_avatar.png'),
			richText: '' //富文本内容
		};
	},
	components: { RichText },
	props: ['message', 'index', 'msgType', 'fileurl', 'name', 'type', 'user'],
	mounted() {
		const className = 'chatMessageText' + this.index;
		/* eslint-disable */
		const lastClass = $('.chatMessageText').length - 1;
		$('.' + className).append(this.message);
		/* eslint-enable */
		// div.append('<img src="../../static/images/editor/emotion/qq/12.gif"> ');
		console.log(this.agent);
	},
	computed: {
		...mapState({
			agent: state => state.user.agent,
			customer: state => state.user.customer
		}),
		getCustomerAvatar() {
			return this.customer.avatar ? this.customer.avatar : this.clientImages;
		},
		getAgentAvatar() {
			return this.agent.isRobot ? this.robotImages : this.agentImages;
		}
	},
	methods: {
		...mapMutations('message', ['SET_RICH_TEXT']),
		showFullImg() {
			const src = this.message.url;
			if (this.message.type === 'pic') {
				this.$parent.showFullImg(src);
			} else if (this.message.type === 'file' || this.message.type === 'doc') {
				if (_.startsWith(src, 'http://')) {
					let fileUrl = _.replace(src, 'http', 'https');
					window.open(fileUrl);
					return;
				}
				window.open(src);
			} else if (this.message.type === 'richtext') {
				this.$store.commit('SET_RICH_TEXT', this.message.content);
			}
		}
	}
};
</script>

<style scoped lang="less">
.chat-message-container .buiness {
	color: #999;
	font-size: 12px;
	position: relative;
	padding: 0 12px;
	min-width: 60px;
	display: inline-block;
}
.chat-message-container .buiness i {
	font-style: normal;
	position: absolute;
	bottom: 0px;
	left: 0;
}
.chat-message-container .buinessCustomer {
	color: #999;
	font-size: 12px;
	position: relative;
	margin: 0 12px;
	display: inline-block;
	min-width: 60px;
}
.chat-message-container .buinessCustomer i {
	font-style: normal;
	position: absolute;
	bottom: 0px;
	left: 0;
}

.chat-message-container {
	.customer-box {
		width: 100%;
		display: flex;
	}
	.agent-box {
		width: 100%;
		display: flex;
		flex-flow: row-reverse;
	}
	.agent-name {
		padding: 0 10px;
		color: #333;
	}
	.customer-name {
		padding: 0 10px;
		color: #333;
	}
	.customer-text {
		// padding-left: 20px;
	}
	.img {
		width: 50px;
	}
}
</style>

<style lang="less">
.chat-message-container {
	.ivu-avatar-large {
		min-width: 50px;
		min-height: 50px;
		line-height: 50px;
		border-radius: 50%;
	}
}
</style>
